<template>
	<div class="containerC">
		<div class="box">
			<NAVC title='我的消息' bgc='transparent' class="navCTop"/>
			<div class="tab">
				<view class="notification" @click="shop">
					<view class="notificationIcon">
						<image v-if="active===1" src="../../static/images/MyMsg/icon-buy.png" mode="heightFix"></image>
						<image v-else src="../../static/images/MyMsg/icon-buy-define.png" mode="heightFix"></image>
						<view class="Tips">
							{{2}}
						</view>
					</view>
					<text class="notificationText">购物通知</text>
				</view>
				<view class="notification" @click="System">
					<view class="notificationIcon">
						<image v-if="active===2" src="../../static/images/MyMsg/icon-system.png" mode="heightFix">
						</image>
						<image v-else src="../../static/images/MyMsg/icon-system-define.png" mode="heightFix"></image>
						<view class="Tips">
							{{5}}
						</view>
					</view>
					<text class="notificationText">系统通知</text>
				</view>
				<view class="notification" @click="trusteeship">
					<view class="notificationIcon">
						<image v-if="active===3" src="../../static/images/MyMsg/icon-trusteeship.png" mode="heightFix">
						</image>
						<image v-else src="../../static/images/MyMsg/icon-trusteeship-define.png" mode="heightFix">
						</image>
						<view class="Tips">
							{{2}}
						</view>
					</view>
					<text class="notificationText">托管通知</text>
				</view>
			</div>
			<view class="list">
				<ItemA :num='active'></ItemA>
			</view>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import NAVC from '@/components/equipmentC/navC/index.vue'
	import ItemA from '@/components/Home/MyMsg/item/index.vue'

	import { ref } from 'vue';
	const active = ref(1)
	const shop = async () => {
		console.log('购物通知')
		active.value = 1

	}
	const System = async () => {
		console.log('系统通知')
		active.value = 2
	}
	const trusteeship = async () => {
		console.log('托管通知')
		active.value = 3
	}
</script>

<style lang="scss" scoped>
	.navCTop{
		position: absolute;
		top: 0;
		width: 100%;
		left: 0;
	}
	.containerC {
		width: 100%;
		min-height: 100vh;
		padding: 0 32px;
		box-sizing: border-box;
		background-image: url('../../static/images/MyMsg/backgroundMSG.png');
		background-repeat: no-repeat;
		background-size: 100% 445px;
		background-position: top;
		background-color: #121317;

		.box {
			padding-top: 132px;
			box-sizing: border-box;
			width: 100%;
			height: 100%;

			.tab {
				width: 100%;
				height: 153px;
				padding: 0 69px;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.notification {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;

					.notificationIcon {
						position: relative;
						height: 112px;
						border-radius: 50%;
						width: 112px;
						background: radial-gradient(circle at center, black, #4a4869);
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							height: 64px;
						}

						.Tips {
							position: absolute;
							top: 0;
							right: 0;
							padding: 2px 13px;
							background: red;
							border-radius: 15px;
							color: white;
							font-size: 22px;
						}
					}

					.notificationText {
						font-size: 24px;
						color: white;
					}
				}
			}

		}

		.list {
			padding-top: 40px;
		}
	}
</style>